<template>
	<view>
		<view class="t-14">{{title}}</view>
		<van-grid column-num="3" :border="false">
			<van-grid-item use-slot v-for="(item,index) in sizes" :key="index">
				<view :class="`item  ${item.active ? 'item-border-active':'item-border'}`" @click="onChangeSize(index)">
					{{item.title}}
				</view>
			</van-grid-item>
		</van-grid>
	</view>
</template>

<script>
	export default {
		name: "ppl-size",
		props: {
			title: {
				type: String,
				default: '标题'
			},
			sizes: {
				type: Array,
				default: []
			}
		},
		data() {
			return {

			};
		},
		methods: {
			onChangeSize(i) {
				this.sizes.forEach((item, index) => {
					if (index == i) {
						item.active = true;
					} else {
						item.active = false;
					};
				})
				this.$emit('onChange', i)
			}

		}
	}
</script>

<style scoped>
	.item {
		width: 100%;
		padding: 28rpx 0;
		color: #3c91ff;
		text-align: center;
		font-size: 32rpx;
		border-radius: 10px;
	}

	.item-border {
		border: 1px solid #ddd;
	}

	.item-border-active {
		border: 1px solid #3c91ff;
	}
</style>